<template>
  <div id="app">
    <transition name="fade" mode="out-in" >
      <router-view class="appView"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      direction: 'slide-right'
    }
  },
	created () {
	  // 在页面加载时读取localStorage里的状态信息
	  if (localStorage.getItem('store')) {
	    this.$store.replaceState(
	      Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem('store')))
	    )
	    localStorage.removeItem('store')
	  }
	
	  //在ios中，beforeunload被弃用改只用pagehide
	  // 在页面刷新时将vuex里的信息保存到localStorage里
	  window.addEventListener('pagehide', () => {
	    localStorage.setItem('store', JSON.stringify(this.$store.state))
	  })
	},
  mounted () {
  }
}
</script>

<style lang="scss">
  @import 'styles/common.scss';
  #app{
    background: #f5f5f5;
    min-height: 100vh;
  }
	.no_data{
		margin: rem(40) 0;
		color: #999;
	}
  .fade-enter {
    opacity:0;
  }
  .fade-leave{
    opacity:1;
  }
  .fade-enter-active{
    transition:opacity .1s;
  }
  .fade-leave-active{
    opacity:0;
    transition:opacity .1s;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #484848;
    font-size: rem(28);
  }
</style>
